<script setup lang="ts">
import {useRoute} from "vue-router";

const route = useRoute();
</script>

<template>
  <div class="flex gap-4">
    <div class="item-left shadow">
      <p>张三</p>
      <p>13512783986</p>
      <p>694995669@qq.com</p>
    </div>
    <div class="item-right shadow">
      <router-view/>
    </div>


  </div>
</template>

<style scoped>
.flex{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;/*默认值*/
  justify-content: space-between;/*X轴上子元素的对齐方式：中间空格（两端元素贴边，中间元素平均隔开） */
  align-items:stretch;/*Y轴上子元素的对齐方式：拉伸对齐（与父元素同高）*/
}
.item-left{
  flex: 0 0;
}
.item-right{flex-grow: 1}

.item-left,.item-right {
  padding: 10px;
}
</style>